<form method="post" action="html5_web_chart" id="form1">
							<table>
								<tr>
									<td>
										Data Type:
										<select name="dataType" id="dataType" onchange="selectChangeAction(this)">
											<option value="lineData" selected>Line Data</option>
											<option value="columnData">Column Data</option>
										</select>
										&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
										First <label id="lineOrColumn">Column</label> is label: 
										<input type="checkbox" name="firstDataIsLabel" checked id="firstDataIsLabel" value="true">
									</td>
								</tr>
								<tr>
									<td>
										Labels:
										<input type="text" size="94" name="labels" id="labels" value="Monday,Tueday,Wesday,Thursday,Friday">
									</td>
								</tr>								
								<tr id="postTr">
									<td>
										Data:
										<textarea cols="105" rows="15" name="data" id="data">Lily,324,435,657,756,123
Tom,232,431,123,874,59
Lucy,212,54,13,67,98
Bruce,873,113,566,988,100</textarea>
									</td>
								</tr>
								<tr>
									<td align="center">
										<select name="chartType" id="chartType">
											<option value="line" selected>Line Chart</option>
											<option value="bar">Bar Chart</option>
											<option value="horizontalBar">Horizontal Bar Chart</option>
											<option value="doughnut">Doughnut Chart</option>
											<option value="pie">Pie Chart</option>
											<option value="radar">Radar Chart</option>
											<option value="polarArea">Polar-area Chart</option>
										</select>
										<input type="button" value="Gererate Chart" onclick="doSubmit()"/>
									</td>
								</tr>
							</table>
						</form>
						<div style="width:100%">
							<div>
								<canvas id="canvas" height="450" width="600"></canvas>
							</div>
						</div>
						<script>
							var lineChartData = {
								labels : ["Monday","Tueday","Wesday","Thursday","Friday"],
								datasets : [
									{											
										label: "Lily",	
										
										fill : false,											
										lineTension: 0.1,
							            backgroundColor: "rgba(255,255,255,0.4)",
							            borderColor: "#FF6384",
							            borderCapStyle: 'butt',		
							            borderDash: [],
							            borderDashOffset: 0.0,
							            borderJoinStyle: 'miter',
							            pointBorderColor: "#FF6384",
							            pointBackgroundColor: "#fff",
							            pointBorderWidth: 1,
							            pointHoverRadius: 5,
							            pointHoverBackgroundColor: "#FF6384",
							            pointHoverBorderColor: "#FF6384",
							            pointHoverBorderWidth: 2,
							            pointRadius: 1,
							            pointHitRadius: 10,
								
										data : [324,435,657,756,123]											
									}
									,
									{											
										label: "Tom",	
										
										fill : false,											
										lineTension: 0.1,
							            backgroundColor: "rgba(255,255,255,0.4)",
							            borderColor: "#4BC0C0",
							            borderCapStyle: 'butt',		
							            borderDash: [],
							            borderDashOffset: 0.0,
							            borderJoinStyle: 'miter',
							            pointBorderColor: "#4BC0C0",
							            pointBackgroundColor: "#fff",
							            pointBorderWidth: 1,
							            pointHoverRadius: 5,
							            pointHoverBackgroundColor: "#4BC0C0",
							            pointHoverBorderColor: "#4BC0C0",
							            pointHoverBorderWidth: 2,
							            pointRadius: 1,
							            pointHitRadius: 10,
								
										data : [232,431,123,874,59]											
									}
									,
									{											
										label: "Lucy",	
										
										fill : false,											
										lineTension: 0.1,
							            backgroundColor: "rgba(255,255,255,0.4)",
							            borderColor: "#FFCE56",
							            borderCapStyle: 'butt',		
							            borderDash: [],
							            borderDashOffset: 0.0,
							            borderJoinStyle: 'miter',
							            pointBorderColor: "#FFCE56",
							            pointBackgroundColor: "#fff",
							            pointBorderWidth: 1,
							            pointHoverRadius: 5,
							            pointHoverBackgroundColor: "#FFCE56",
							            pointHoverBorderColor: "#FFCE56",
							            pointHoverBorderWidth: 2,
							            pointRadius: 1,
							            pointHitRadius: 10,
								
										data : [212,54,13,67,98]											
									}
									,
									{											
										label: "Bruce",	
										
										fill : false,											
										lineTension: 0.1,
							            backgroundColor: "rgba(255,255,255,0.4)",
							            borderColor: "#E7E9ED",
							            borderCapStyle: 'butt',		
							            borderDash: [],
							            borderDashOffset: 0.0,
							            borderJoinStyle: 'miter',
							            pointBorderColor: "#E7E9ED",
							            pointBackgroundColor: "#fff",
							            pointBorderWidth: 1,
							            pointHoverRadius: 5,
							            pointHoverBackgroundColor: "#E7E9ED",
							            pointHoverBorderColor: "#E7E9ED",
							            pointHoverBorderWidth: 2,
							            pointRadius: 1,
							            pointHitRadius: 10,
								
										data : [873,113,566,988,100]											
									}
								]
							}
							window.onload = function(){
								var ctx = document.getElementById("canvas").getContext("2d");
								var myLineChart = new Chart(ctx, {
								    type: 'line',
								    data: lineChartData,
								    options: {responsive: true}
								});
							}
						</script>